<template>
  <div class="allfriends">
    <van-tabs v-model="active">
      <template :name="transitionName">
        <van-icon name="arrow-left" @click="back"
      /></template>
      <van-tab title="推荐"
        ><img @click="play()" src="../../assets/song.jpg" alt=""
      /></van-tab>
      <van-tab title="关注">
        <!-- 关注内容 -->
        <div class="time">
          <div><span>按关注时间排序</span></div>
          <div class="all">
            <span
              :class="current === index ? 'active' : ''"
              v-for="(data, index) in list1"
              @click="handleChange(index)"
              :key="index"
            >
              {{ data }}
            </span>
          </div>
        </div>
        <div class="update">
          <div><span>本周更新</span></div>
          <div class="font">
            <img src="" alt="" />
            <span>4</span>
            <span>人更新</span>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="fList">
          <div
            class="flex"
            v-for="(data, index) in list"
            :key="data.userId"
            @click="goSinger(index)"
          >
            <div><img :src="data.avatarUrl" alt="" /></div>
            <div>
              <p>{{ data.nickname }}</p>
              <p>昵称：{{ data.nickname }}</p>
            </div>
          </div>
          <div v-for="(item, index) in pic" :key="index" class="op">
            <img v-if="item" :src="item.imageUrl" alt="" />
            <!-- <img v-if="!item" src="../../assets/quanzi.jpg" alt="" /> -->
          </div>
        </div>
      </van-tab>

      <van-tab title="粉丝">你没有粉丝！！！</van-tab>
      <template> <van-icon name="search" /></template>
    </van-tabs>
  </div>
</template>

<script>
import "../../assets/font-follow/vantChange.css";
import axios from "axios";

export default {
  data() {
    return {
      current: 0,
      active: 1,
      list1: ["全部", "歌手", "用户"],
      list: [],
      transitionName: "",
      id: "",
      pic: [],
      list2: [],
    };
  },
  computed: {
    param() {
      return `cookie=${localStorage.getItem(
        "cookie"
      )}&timestamp=${new Date().getTime()}`;
    },
  },
  watch: {
    // 使用watch 监听$router的变化
    $route(to, from) {
      // 如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if (to.meta.index > from.meta.index) {
        // 设置动画名称
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    },
  },

  methods: {
    play(id) {
      this.$router.push("/playpage/" + 1808078153);
    },
    back() {
      this.$router.go(-1);
    },
    handleChange(index) {
      this.current = index;
    },
    goSinger(index) {
      const id = this.list2[index];
      this.$router.push("/singerhomepage/" + id);
    },
    //调取接口获取用户关注列表
    async user() {
      const res = await axios.get(
        "http://192.168.31.27:3000/user/account?" + this.param,
        {
          withCredentials: true,
        }
      );
      //调取接口获取用户关注列表
      // console.log(0, res.data.account.id);
      const id = res.data.account.id;
      const result = await axios
        .get(
          "http://192.168.31.27:3000/user/follows",
          {
            params: {
              uid: id,
            },
          },
          {
            withCredentials: true,
          }
        )
        .then((res) => {
          this.list = res.data.follow;
          this.list.forEach(async (item) => {
            this.list2.push(item.userId);
            const result = await axios.get(
              "http://192.168.31.27:3000/user/detail?uid=" + item.userId,
              {
                withCredentials: true,
              }
            );
            console.log(111, result.data.identify);
            this.pic.push(result.data.identify);
            if (this.pic.length == 11) {
              // this.dfghbnjm();
            }
          });
        });
    },
  },
  created() {
    this.user();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.fList {
  position: relative;
}
.fList .op img {
  width: 25px;
  position: absolute;
  top: 35px;
  left: 37px;
}
.fList .op:nth-child(13) img {
  top: 115px;
}
.fList .op:nth-child(14) img {
  top: 200px;
}
.fList .op:nth-child(15) img {
  top: 280px;
}
.fList .op:nth-child(16) img {
  top: 360px;
}
.fList .op:nth-child(17) img {
  top: 440px;
}
.fList .op:nth-child(18) img {
  top: 520px;
}
.fList .op:nth-child(19) img {
  top: 600px;
}
.fList .op:nth-child(20) img {
  top: 680px;
}
.fList .op:nth-child(21) img {
  top: 760px;
}
.fList .op:nth-child(22) img {
  top: 840px;
}
.allfriends {
  padding-bottom: 10px;
}
/* 关注样式 */
.bottomplay {
  bottom: 0;
}
.time {
  padding: 0 0 0 10px;
  height: 50px;
  line-height: 50px;
  display: flex;
  letter-spacing: 1px;
  justify-content: space-between;
  color: #fff;
}
.all .active {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
}
.all span {
  display: inline-block;
  line-height: 13px;
  text-align: center;
  width: 50px;
  height: 13px;
  color: #c6b8b8;
  font-size: 13px;
  border-right: 2px solid #706665;
}
.update {
  border: 2px solid #908081;
  border-radius: 10px;
  padding: 0 10px;
  margin: 10px 15px;
  height: 50px;
  display: flex;
  line-height: 50px;
  justify-content: space-between;
  color: #fff;
  letter-spacing: 1px;
}
.font {
  color: #c6b8b8;
}
.fList {
  margin: 15px 15px;
}
.fList .flex {
  height: 80px;
  display: flex;
}
.fList img {
  width: 60px;
  margin-right: 17px;
  border-radius: 60px;
}
.fList div p:nth-child(1) {
  color: #fff;
  font-size: 19px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.fList div p:nth-child(2) {
  color: #c6b8b8;
  font-size: 15px;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>
